<!doctype html>
<html>
	<head>
		<style>
			a{
				display:block;
				width:100px;
				height:100px;
				background: linear-gradient(to right, red 50%, blue 50%);
				background-size:200px;
				transition:all .5s linear;
			} 
		
			a:hover{
				
				background-position:100px 0;;
			
			}
		
			
		</style>
	</head>
	<body>
		<a id="test" ></a>
	
	</body>
</html>